import React, { Component } from 'react'
import { Form, Input, Button, Checkbox } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import './index.less'
import { connect } from 'react-redux'
import { loginAsyncAction } from '../../actions/user'
import { Redirect } from 'react-router-dom'
const mapStateToProps=state=>({
  token:state.user.token
})
const mapDispatchToProps={
  loginAsync:loginAsyncAction
}
@connect(mapStateToProps,mapDispatchToProps)
class Login extends Component {
  onFinish = (values) => {
    console.log('Received values of form: ', values)
    this.props.loginAsync(values)
  }
  render() {
    return (
      this.props.token
      ?
      <Redirect to="/admin"/>
      :
      <div className="app-login">
        <h1 style={{color:'white',textAlign:'center'}}>防疫防控人员出入管理系统</h1>
         <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your Password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox><span style={{color:'white'}}>Remember me</span></Checkbox>
            </Form.Item>

          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
          </Form.Item>
      </Form>  
    </div>
    )
  }
}
export default  Login